<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web前端设计器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        /* 工具栏 */
        .toolbar {
            padding: 10px;
            background-color: #e0e0e0;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
        }
        
        /* 主内容区域 */
        .main-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        /* 侧边栏通用样式 */
        .sidebar {
            background-color: #f0f0f0;
            overflow-y: auto;
            transition: width 0.3s ease;
            position: relative;
            border-right: 1px solid #ccc;
        }
        
        /* 组件面板 */
        .components-panel {
            width: 220px;
        }
        
        /* 属性面板 */
        .properties-panel {
            width: 280px;
            border-left: 1px solid #ccc;
            border-right: none;
        }
        
        /* 折叠状态下的侧边栏 */
        .sidebar.collapsed {
            width: 40px !important;
            overflow: hidden;
        }
        
        /* 侧边栏折叠按钮 */
        .toggle-sidebar {
            position: absolute;
            top: 5px;
            right: 5px;
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
            z-index: 10;
        }
        
        /* 设计区域 */
        .design-area-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .design-area {
            flex: 1;
            padding: 20px;
            overflow: auto;
            background-color: #f9f9f9;
        }
        
        .design-container {
            min-height: 100%;
            min-width: 100%;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            position: relative;
        }
        
        /* 组件项 */
        .component-item {
            padding: 10px;
            margin-bottom: 5px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: move;
            text-align: center;
        }
        
        /* 属性面板内容 */
        .property-group {
            margin-bottom: 15px;
        }
        
        .property-group h3 {
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
        }
        
        .property-item {
            margin-bottom: 8px;
        }
        
        .property-item label {
            display: block;
            margin-bottom: 3px;
            font-size: 12px;
            color: #666;
        }
        
        .property-item input, 
        .property-item select, 
        .property-item textarea {
            width: 100%;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        
        /* 按钮样式 */
        button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        /* 可拖放组件样式 */
        .draggable-component {
            margin: 10px 0;
            padding: 10px;
            border: 1px dashed #ccc;
            position: absolute;
            cursor: move;
        }
        
        .draggable-component:hover {
            border-color: #4CAF50;
        }
        
        .component-actions {
            position: absolute;
            top: 0;
            right: 0;
            display: none;
        }
        
        .draggable-component:hover .component-actions {
            display: block;
        }
        
        .component-actions button {
            padding: 2px 5px;
            margin-left: 3px;
            font-size: 12px;
            background-color: #f44336;
        }
        
        .component-actions button.edit-btn {
            background-color: #2196F3;
        }
        
        /* 调整大小手柄 */
        .resize-handle {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #4CAF50;
            right: 0;
            bottom: 0;
            cursor: se-resize;
            display: none;
        }
        
        .draggable-component:hover .resize-handle {
            display: block;
        }
        
        /* 表格样式 */
        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        table, th, td {
            border: 1px solid #ddd;
        }
        
        th, td {
            padding: 8px;
            text-align: left;
        }
        
        /* 侧边栏标题 */
        .sidebar-header {
            padding: 10px;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
            background-color: #e0e0e0;
        }
        
        /* 导出模态框 */
        #export-modal {
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background-color: rgba(0,0,0,0.5); 
            z-index: 1000; 
            justify-content: center; 
            align-items: center;
        }
        
        .modal-content {
            background-color: white; 
            padding: 20px; 
            border-radius: 5px; 
            width: 80%; 
            max-width: 800px; 
            max-height: 80%; 
            overflow: auto;
        }
        
        /* 新增组件样式 */
        .radio-group, .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .border-component {
            padding: 15px;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <!-- 工具栏 -->
    <div class="toolbar">
        <div>
            <button id="toggle-components">≡ 组件</button>
            <button id="toggle-properties">≡ 属性</button>
        </div>
        <div>
            <button id="export-btn">导出HTML</button>
            <button id="clear-btn">清空设计区</button>
        </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 组件面板 -->
        <div class="sidebar components-panel" id="components-panel">
            <button class="toggle-sidebar" id="toggle-components-btn">◄</button>
            <div class="sidebar-header">组件</div>
            <div class="sidebar-content">
                <div class="component-item" draggable="true" data-type="button">按钮</div>
                <div class="component-item" draggable="true" data-type="label">标签</div>
                <div class="component-item" draggable="true" data-type="textbox">文本框</div>
                <div class="component-item" draggable="true" data-type="textarea">多行文本</div>
                <div class="component-item" draggable="true" data-type="select">下拉框</div>
                <div class="component-item" draggable="true" data-type="checkbox">复选框</div>
                <div class="component-item" draggable="true" data-type="radio">单选框</div>
                <div class="component-item" draggable="true" data-type="table">表格</div>
                <div class="component-item" draggable="true" data-type="div">容器</div>
                <div class="component-item" draggable="true" data-type="border">边框</div>
            </div>
        </div>
        
        <!-- 设计区域 -->
        <div class="design-area-container">
            <div class="design-area">
                <div class="design-container" id="design-container">
                    <!-- 设计内容将在这里显示 -->
                </div>
            </div>
        </div>
        
        <!-- 属性面板 -->
        <div class="sidebar properties-panel" id="properties-panel">
            <button class="toggle-sidebar" id="toggle-properties-btn">►</button>
            <div class="sidebar-header">属性</div>
            <div id="properties-content">
                <p>请选择一个组件来编辑属性</p>
            </div>
        </div>
    </div>
    
    <!-- 导出模态框 -->
    <div id="export-modal">
        <div class="modal-content">
            <h2>导出HTML代码</h2>
            <textarea id="export-code" style="width: 100%; height: 300px; margin: 10px 0; font-family: monospace;"></textarea>
            <div style="text-align: right;">
                <button id="copy-btn">复制代码</button>
                <button id="close-modal" style="margin-left: 10px;">关闭</button>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 当前选中的组件
            let selectedComponent = null;
            
            // 组件计数器
            let componentCounter = 0;
            
            // 存储所有组件数据
            const componentsData = {};
            
            // 拖拽状态
            let isDragging = false;
            let isResizing = false;
            let dragStartX, dragStartY;
            let originalWidth, originalHeight;
            
            // 侧边栏折叠/展开
            document.getElementById('toggle-components').addEventListener('click', function() {
                document.getElementById('components-panel').classList.toggle('collapsed');
                const btn = document.getElementById('toggle-components-btn');
                btn.textContent = btn.textContent === '◄' ? '►' : '◄';
            });
            
            document.getElementById('toggle-properties').addEventListener('click', function() {
                document.getElementById('properties-panel').classList.toggle('collapsed');
                const btn = document.getElementById('toggle-properties-btn');
                btn.textContent = btn.textContent === '►' ? '◄' : '►';
            });
            
            // 为组件面板中的项目添加拖拽事件
            const componentItems = document.querySelectorAll('.component-item');
            componentItems.forEach(item => {
                item.addEventListener('dragstart', function(e) {
                    e.dataTransfer.setData('text/plain', this.getAttribute('data-type'));
                });
            });
            
            // 设计区域拖放事件
            const designContainer = document.getElementById('design-container');
            designContainer.addEventListener('dragover', function(e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy';
            });
            
            designContainer.addEventListener('drop', function(e) {
                e.preventDefault();
                const componentType = e.dataTransfer.getData('text/plain');
                if (componentType) {
                    addComponent(componentType, e.clientX, e.clientY);
                }
            });
            
            // 添加组件到设计区域
            function addComponent(type, x, y) {
                componentCounter++;
                const id = `component-${componentCounter}`;
                let html = '';
                let defaultProps = {};
                
                // 根据组件类型创建不同的HTML和默认属性
                switch(type) {
                    case 'button':
                        html = `<button id="${id}">按钮</button>`;
                        defaultProps = {
                            text: '按钮',
                            class: '',
                            style: ''
                        };
                        break;
                    case 'label':
                        html = `<label id="${id}">标签文本</label>`;
                        defaultProps = {
                            text: '标签文本',
                            'for': '',
                            class: '',
                            style: ''
                        };
                        break;
                    case 'textbox':
                        html = `<input type="text" id="${id}" placeholder="文本框">`;
                        defaultProps = {
                            placeholder: '文本框',
                            value: '',
                            class: '',
                            style: ''
                        };
                        break;
                    case 'textarea':
                        html = `<textarea id="${id}" placeholder="多行文本"></textarea>`;
                        defaultProps = {
                            placeholder: '多行文本',
                            value: '',
                            rows: '3',
                            class: '',
                            style: ''
                        };
                        break;
                    case 'select':
                        html = `
                            <select id="${id}">
                                <option value="1">选项1</option>
                                <option value="2">选项2</option>
                                <option value="3">选项3</option>
                            </select>
                        `;
                        defaultProps = {
                            options: ['选项1', '选项2', '选项3'],
                            selected: '1',
                            class: '',
                            style: ''
                        };
                        break;
                    case 'checkbox':
                        html = `
                            <div class="checkbox-group" id="${id}">
                                <label><input type="checkbox" name="${id}-checkbox" value="1"> 选项1</label>
                                <label><input type="checkbox" name="${id}-checkbox" value="2"> 选项2</label>
                            </div>
                        `;
                        defaultProps = {
                            options: ['选项1', '选项2'],
                            checked: ['1'],
                            class: '',
                            style: ''
                        };
                        break;
                    case 'radio':
                        html = `
                            <div class="radio-group" id="${id}">
                                <label><input type="radio" name="${id}-radio" value="1" checked> 选项1</label>
                                <label><input type="radio" name="${id}-radio" value="2"> 选项2</label>
                            </div>
                        `;
                        defaultProps = {
                            options: ['选项1', '选项2'],
                            selected: '1',
                            class: '',
                            style: ''
                        };
                        break;
                    case 'table':
                        html = `
                            <table id="${id}">
                                <thead>
                                    <tr>
                                        <th>标题1</th>
                                        <th>标题2</th>
                                        <th>标题3</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>内容1</td>
                                        <td>内容2</td>
                                        <td>内容3</td>
                                    </tr>
                                    <tr>
                                        <td>内容4</td>
                                        <td>内容5</td>
                                        <td>内容6</td>
                                    </tr>
                                </tbody>
                            </table>
                        `;
                        defaultProps = {
                            rows: '2',
                            cols: '3',
                            class: '',
                            style: ''
                        };
                        break;
                    case 'div':
                        html = `<div id="${id}">容器</div>`;
                        defaultProps = {
                            text: '容器',
                            class: '',
                            style: '',
                            width: '200px',
                            height: '150px'
                        };
                        break;
                    case 'border':
                        html = `<div class="border-component" id="${id}">边框内容</div>`;
                        defaultProps = {
                            text: '边框内容',
                            borderWidth: '2px',
                            borderStyle: 'solid',
                            borderColor: '#000',
                            class: '',
                            style: '',
                            width: '200px',
                            height: '150px'
                        };
                        break;
                }
                
                // 创建组件包装器
                const wrapper = document.createElement('div');
                wrapper.className = 'draggable-component';
                wrapper.dataset.type = type;
                wrapper.dataset.id = id;
                
                // 添加调整大小手柄（对容器和边框组件）
                if (type === 'div' || type === 'border') {
                    html += '<div class="resize-handle"></div>';
                }
                
                wrapper.innerHTML = `
                    ${html}
                    <div class="component-actions">
                        <button class="edit-btn" data-id="${id}">编辑</button>
                        <button class="delete-btn" data-id="${id}">删除</button>
                    </div>
                `;
                
                // 计算设计区域内的相对位置
                const rect = designContainer.getBoundingClientRect();
                const scrollTop = designContainer.scrollTop || 0;
                const scrollLeft = designContainer.scrollLeft || 0;
                
                const top = y - rect.top + scrollTop - 10;
                const left = x - rect.left + scrollLeft - 10;
                
                wrapper.style.top = `${top}px`;
                wrapper.style.left = `${left}px`;
                
                // 设置可调整大小组件的初始大小
                if (type === 'div' || type === 'border') {
                    wrapper.style.width = defaultProps.width;
                    wrapper.style.height = defaultProps.height;
                    
                    // 设置边框组件的边框样式
                    if (type === 'border') {
                        const borderElem = wrapper.querySelector('.border-component');
                        borderElem.style.borderWidth = defaultProps.borderWidth;
                        borderElem.style.borderStyle = defaultProps.borderStyle;
                        borderElem.style.borderColor = defaultProps.borderColor;
                    }
                }
                
                // 添加到设计区域
                designContainer.appendChild(wrapper);
                
                // 保存组件数据
                saveComponentData(id, {
                    type: type,
                    props: defaultProps,
                    position: { top, left },
                    size: (type === 'div' || type === 'border') ? { 
                        width: parseInt(defaultProps.width), 
                        height: parseInt(defaultProps.height) 
                    } : null
                });
                
                // 添加组件事件监听
                setupComponentEvents(wrapper);
                
                // 初始选择新添加的组件
                selectComponent(wrapper);
            }
            
            // 设置组件事件监听
            function setupComponentEvents(wrapper) {
                const id = wrapper.dataset.id;
                const type = wrapper.dataset.type;
                
                // 点击选择组件
                wrapper.addEventListener('click', function(e) {
                    if (e.target.classList.contains('delete-btn')) {
                        deleteComponent(e.target.getAttribute('data-id'));
                        return;
                    }
                    
                    if (e.target.classList.contains('edit-btn') || e.target === this || this.contains(e.target)) {
                        e.stopPropagation();
                        selectComponent(this);
                    }
                });
                
                // 鼠标按下事件 - 开始拖动或调整大小
                wrapper.addEventListener('mousedown', function(e) {
                    // 检查是否点击了调整大小手柄
                    if (e.target.classList.contains('resize-handle')) {
                        isResizing = true;
                        originalWidth = parseInt(this.style.width) || this.offsetWidth;
                        originalHeight = parseInt(this.style.height) || this.offsetHeight;
                        dragStartX = e.clientX;
                        dragStartY = e.clientY;
                        e.preventDefault();
                        e.stopPropagation();
                        return;
                    }
                    
                    // 否则开始拖动
                    isDragging = true;
                    dragStartX = e.clientX - parseInt(this.style.left || 0);
                    dragStartY = e.clientY - parseInt(this.style.top || 0);
                    
                    // 选中组件
                    selectComponent(this);
                    
                    e.preventDefault();
                    e.stopPropagation();
                });
                
                // 鼠标移动事件 - 处理拖动或调整大小
                document.addEventListener('mousemove', function(e) {
                    if (!isDragging && !isResizing) return;
                    
                    if (isDragging && selectedComponent) {
                        // 处理拖动
                        const newLeft = e.clientX - dragStartX;
                        const newTop = e.clientY - dragStartY;
                        
                        selectedComponent.style.left = `${newLeft}px`;
                        selectedComponent.style.top = `${newTop}px`;
                        
                        // 更新组件数据
                        const componentData = getComponentData(selectedComponent.dataset.id);
                        componentData.position = { top: newTop, left: newLeft };
                        saveComponentData(selectedComponent.dataset.id, componentData);
                    } else if (isResizing && selectedComponent && 
                              (selectedComponent.dataset.type === 'div' || selectedComponent.dataset.type === 'border')) {
                        // 处理调整大小
                        const deltaX = e.clientX - dragStartX;
                        const deltaY = e.clientY - dragStartY;
                        
                        const newWidth = Math.max(50, originalWidth + deltaX);
                        const newHeight = Math.max(50, originalHeight + deltaY);
                        
                        selectedComponent.style.width = `${newWidth}px`;
                        selectedComponent.style.height = `${newHeight}px`;
                        
                        // 更新组件数据
                        const componentData = getComponentData(selectedComponent.dataset.id);
                        componentData.size = { width: newWidth, height: newHeight };
                        componentData.props.width = `${newWidth}px`;
                        componentData.props.height = `${newHeight}px`;
                        saveComponentData(selectedComponent.dataset.id, componentData);
                    }
                });
                
                // 鼠标松开事件 - 结束拖动或调整大小
                document.addEventListener('mouseup', function() {
                    isDragging = false;
                    isResizing = false;
                });
            }
            
            // 保存组件数据
            function saveComponentData(id, data) {
                componentsData[id] = data;
            }
            
            // 获取组件数据
            function getComponentData(id) {
                return componentsData[id] || {};
            }
            
            // 选择组件
            function selectComponent(element) {
                // 移除之前选中的组件的样式
                if (selectedComponent) {
                    selectedComponent.style.outline = 'none';
                }
                
                selectedComponent = element;
                element.style.outline = '2px solid #4CAF50';
                
                // 显示组件属性
                showProperties(element);
                
                // 确保属性面板是展开的
                document.getElementById('properties-panel').classList.remove('collapsed');
                document.getElementById('toggle-properties-btn').textContent = '◄';
            }
            
            // 显示组件属性
            function showProperties(element) {
                const type = element.dataset.type;
                const id = element.dataset.id;
                const componentData = getComponentData(id);
                
                let propertiesHTML = `<h3>${type} 属性</h3>`;
                
                // 根据组件类型显示不同的属性编辑器
                switch(type) {
                    case 'button':
                    case 'label':
                    case 'div':
                        propertiesHTML += `
                            <div class="property-group">
                                <div class="property-item">
                                    <label>文本内容</label>
                                    <input type="text" class="property-input" data-prop="text" value="${componentData.props.text || ''}">
                                </div>
                                <div class="property-item">
                                    <label>CSS类</label>
                                    <input type="text" class="property-input" data-prop="class" value="${componentData.props.class || ''}">
                                </div>
                                <div class="property-item">
                                    <label>内联样式</label>
                                    <input type="text" class="property-input" data-prop="style" value="${componentData.props.style || ''}">
                                </div>
                            </div>
                        `;
                        if (type === 'label') {
                            propertiesHTML += `
                                <div class="property-item">
                                    <label>For属性</label>
                                    <input type="text" class="property-input" data-prop="for" value="${componentData.props.for || ''}">
                                </div>
                            `;
                        }
                        if (type === 'div') {
                            propertiesHTML += `
                                <div class="property-group">
                                    <div class="property-item">
                                        <label>宽度(px)</label>
                                        <input type="number" class="property-input" data-prop="width" value="${parseInt(componentData.props.width) || 200}">
                                    </div>
                                    <div class="property-item">
                                        <label>高度(px)</label>
                                        <input type="number" class="property-input" data-prop="height" value="${parseInt(componentData.props.height) || 150}">
                                    </div>
                                </div>
                            `;
                        }
                        break;
                    case 'textbox':
                        propertiesHTML += `
                            <div class="property-group">
                                <div class="property-item">
                                    <label>占位文本</label>
                                    <input type="text" class="property-input" data-prop="placeholder" value="${componentData.props.placeholder || ''}">
                                </div>
                                <div class="property-item">
                                    <label>值</label>
                                    <input type="text" class="property-input" data-prop="value" value="${componentData.props.value || ''}">
                                </div>
                                <div class="property-item">
                                    <label>CSS类</label>
                                    <input type="text" class="property-input" data-prop="class" value="${componentData.props.class || ''}">
                                </div>
                                <div class="property-item">
                                    <label>内联样式</label>
                                    <input type="text" class="property-input" data-prop="style" value="${componentData.props.style || ''}">
                                </div>
                            </div>
                        `;
                        break;
                    case 'textarea':
                        propertiesHTML += `
                            <div class="property-group">
                                <div class="property-item">
                                    <label>占位文本</label>
                                    <input type="text" class="property-input" data-prop="placeholder" value="${componentData.props.placeholder || ''}">
                                </div>
                                <div class="property-item">
                                    <label>值</label>
                                    <textarea class="property-input" data-prop="value">${componentData.props.value || ''}</textarea>
                                </div>
                                <div class="property-item">
                                    <label>行数</label>
                                    <input type="number" class="property-input" data-prop="rows" value="${componentData.props.rows || '3'}">
                                </div>
                                <div class="property-item">
                                    <label>CSS类</label>
                                    <input type="text" class="property-input" data-prop="class" value="${componentData.props.class || ''}">
                                </div>
                                <div class="property-item">
                                    <label>内联样式</label>
                                    <input type="text" class="property-input" data-prop="style" value="${componentData.props.style || ''}">
                                </div>
                            </div>
                        `;
                        break;
                    case 'select':
                        propertiesHTML += `
                            <div class="property-group">
                                <div class="property-item">
                                    <label>选项 (每行一个)</label>
                                    <textarea class="property-input" data-prop="options">${componentData.props.options.join('\n') || ''}</textarea>
                                </div>
                                <div class="property-item">
                                    <label>默认选中值</label>
                                    <input type="text" class="property-input" data-prop="selected" value="${componentData.props.selected || ''}">
                                </div>
                                <div class="property-item">
                                    <label>CSS类</label>
                                    <input type="text" class="property-input" data-prop="class" value="${componentData.props.class || ''}">
                                </div>
                                <div class="property-item">
                                    <label>内联样式</label>
                                    <input type="text" class="property-input" data-prop="style" value="${componentData.props.style || ''}">
                                </div>
                                <button id="update-select-btn" style="margin-top: 10px;">更新下拉选项</button>
                            </div>
                        `;
                        break;
                    case 'checkbox':
                        propertiesHTML += `
                            <div class="property-group">
                                <div class="property-item">
                                    <label>选项 (每行一个)</label>
                                    <textarea class="property-input" data-prop="options">${componentData.props.options.join('\n') || ''}</textarea>
                                </div>
                                <div class="property-item">
                                    <label>默认选中 (逗号分隔值)</label>
                                    <input type="text" class="property-input" data-prop="checked" value="${componentData.props.checked.join(',') || ''}">
                                </div>
                                <div class="property-item">
                                    <label>CSS类</label>
                                    <input type="text" class="property-input" data-prop="class" value="${componentData.props.class || ''}">
                                </div>
                                <div class="property-item">
                                    <label>内联样式</label>
                                    <input type="text" class="property-input" data-prop="style" value="${componentData.props.style || ''}">
                                </div>
                                <button id="update-checkbox-btn" style="margin-top: 10px;">更新复选框选项</button>
                            </div>
                        `;
                        break;
                    case 'radio':
                        propertiesHTML += `
                            <div class="property-group">
                                <div class="property-item">
                                    <label>选项 (每行一个)</label>
                                    <textarea class="property-input" data-prop="options">${componentData.props.options.join('\n') || ''}</textarea>
                                </div>
                                <div class="property-item">
                                    <label>默认选中值</label>
                                    <input type="text" class="property-input" data-prop="selected" value="${componentData.props.selected || ''}">
                                </div>
                                <div class="property-item">
                                    <label>CSS类</label>
                                    <input type="text" class="property-input" data-prop="class" value="${componentData.props.class || ''}">
                                </div>
                                <div class="property-item">
                                    <label>内联样式</label>
                                    <input type="text" class="property-input" data-prop="style" value="${componentData.props.style || ''}">
                                </div>
                                <button id="update-radio-btn" style="margin-top: 10px;">更新单选框选项</button>
                            </div>
                        `;
                        break;
                    case 'table':
                        propertiesHTML += `
                            <div class="property-group">
                                <div class="property-item">
                                    <label>行数</label>
                                    <input type="number" class="property-input" data-prop="rows" value="${componentData.props.rows || '2'}">
                                </div>
                                <div class="property-item">
                                    <label>列数</label>
                                    <input type="number" class="property-input" data-prop="cols" value="${componentData.props.cols || '3'}">
                                </div>
                                <div class="property-item">
                                    <label>CSS类</label>
                                    <input type="text" class="property-input" data-prop="class" value="${componentData.props.class || ''}">
                                </div>
                                <div class="property-item">
                                    <label>内联样式</label>
                                    <input type="text" class="property-input" data-prop="style" value="${componentData.props.style || ''}">
                                </div>
                                <button id="update-table-btn" style="margin-top: 10px;">更新表格结构</button>
                            </div>
                        `;
                        break;
                    case 'border':
                        propertiesHTML += `
                            <div class="property-group">
                                <div class="property-item">
                                    <label>内容</label>
                                    <input type="text" class="property-input" data-prop="text" value="${componentData.props.text || ''}">
                                </div>
                                <div class="property-group">
                                    <div class="property-item">
                                        <label>宽度(px)</label>
                                        <input type="number" class="property-input" data-prop="width" value="${parseInt(componentData.props.width) || 200}">
                                    </div>
                                    <div class="property-item">
                                        <label>高度(px)</label>
                                        <input type="number" class="property-input" data-prop="height" value="${parseInt(componentData.props.height) || 150}">
                                    </div>
                                </div>
                                <div class="property-group">
                                    <div class="property-item">
                                        <label>边框宽度</label>
                                        <input type="text" class="property-input" data-prop="borderWidth" value="${componentData.props.borderWidth || '2px'}">
                                    </div>
                                    <div class="property-item">
                                        <label>边框样式</label>
                                        <select class="property-input" data-prop="borderStyle">
                                            <option value="none" ${componentData.props.borderStyle === 'none' ? 'selected' : ''}>无</option>
                                            <option value="solid" ${componentData.props.borderStyle === 'solid' ? 'selected' : ''}>实线</option>
                                            <option value="dashed" ${componentData.props.borderStyle === 'dashed' ? 'selected' : ''}>虚线</option>
                                            <option value="dotted" ${componentData.props.borderStyle === 'dotted' ? 'selected' : ''}>点线</option>
                                            <option value="double" ${componentData.props.borderStyle === 'double' ? 'selected' : ''}>双线</option>
                                        </select>
                                    </div>
                                    <div class="property-item">
                                        <label>边框颜色</label>
                                        <input type="color" class="property-input" data-prop="borderColor" value="${componentData.props.borderColor || '#000000'}">
                                    </div>
                                </div>
                                <div class="property-item">
                                    <label>CSS类</label>
                                    <input type="text" class="property-input" data-prop="class" value="${componentData.props.class || ''}">
                                </div>
                                <div class="property-item">
                                    <label>内联样式</label>
                                    <input type="text" class="property-input" data-prop="style" value="${componentData.props.style || ''}">
                                </div>
                            </div>
                        `;
                        break;
                }
                
                document.getElementById('properties-content').innerHTML = propertiesHTML;
                
                // 为属性输入添加事件监听
                const inputs = document.querySelectorAll('.property-input');
                inputs.forEach(input => {
                    input.addEventListener('change', function() {
                        const prop = this.getAttribute('data-prop');
                        const value = this.value;
                        
                        // 更新组件数据
                        const componentData = getComponentData(id);
                        componentData.props[prop] = value;
                        
                        // 处理特定属性的更新
                        if (type === 'div' || type === 'border') {
                            if (prop === 'width' || prop === 'height') {
                                const wrapper = document.querySelector(`.draggable-component[data-id="${id}"]`);
                                if (wrapper) {
                                    if (prop === 'width') {
                                        wrapper.style.width = `${value}px`;
                                        componentData.size.width = parseInt(value);
                                    } else {
                                        wrapper.style.height = `${value}px`;
                                        componentData.size.height = parseInt(value);
                                    }
                                }
                            }
                        }
                        
                        if (type === 'border') {
                            if (prop === 'borderWidth' || prop === 'borderStyle' || prop === 'borderColor') {
                                const borderElem = document.querySelector(`#${id}`);
                                if (borderElem) {
                                    if (prop === 'borderWidth') {
                                        borderElem.style.borderWidth = value;
                                    } else if (prop === 'borderStyle') {
                                        borderElem.style.borderStyle = value;
                                    } else if (prop === 'borderColor') {
                                        borderElem.style.borderColor = value;
                                    }
                                }
                            }
                        }
                        
                        saveComponentData(id, componentData);
                        
                        // 更新组件
                        updateComponent(id);
                    });
                });
                
                // 下拉框更新按钮
                if (type === 'select') {
                    document.getElementById('update-select-btn').addEventListener('click', function() {
                        const componentData = getComponentData(id);
                        const options = document.querySelector(`.property-input[data-prop="options"]`).value.split('\n');
                        const selected = document.querySelector(`.property-input[data-prop="selected"]`).value;
                        
                        componentData.props.options = options.filter(opt => opt.trim() !== '');
                        componentData.props.selected = selected;
                        saveComponentData(id, componentData);
                        
                        // 更新下拉框
                        const select = document.querySelector(`#${id}`);
                        if (select) {
                            select.innerHTML = '';
                            options.forEach((opt, index) => {
                                if (opt.trim() !== '') {
                                    const option = document.createElement('option');
                                    option.value = index + 1;
                                    option.textContent = opt;
                                    option.selected = (index + 1).toString() === selected;
                                    select.appendChild(option);
                                }
                            });
                        }
                    });
                }
                
                // 复选框更新按钮
                if (type === 'checkbox') {
                    document.getElementById('update-checkbox-btn').addEventListener('click', function() {
                        const componentData = getComponentData(id);
                        const options = document.querySelector(`.property-input[data-prop="options"]`).value.split('\n');
                        const checked = document.querySelector(`.property-input[data-prop="checked"]`).value.split(',');
                        
                        componentData.props.options = options.filter(opt => opt.trim() !== '');
                        componentData.props.checked = checked.filter(val => val.trim() !== '');
                        saveComponentData(id, componentData);
                        
                        // 更新复选框
                        const checkboxGroup = document.querySelector(`#${id}`);
                        if (checkboxGroup) {
                            checkboxGroup.innerHTML = '';
                            options.forEach((opt, index) => {
                                if (opt.trim() !== '') {
                                    const value = index + 1;
                                    const label = document.createElement('label');
                                    const checkbox = document.createElement('input');
                                    checkbox.type = 'checkbox';
                                    checkbox.name = `${id}-checkbox`;
                                    checkbox.value = value;
                                    checkbox.checked = checked.includes(value.toString());
                                    label.appendChild(checkbox);
                                    label.appendChild(document.createTextNode(` ${opt}`));
                                    checkboxGroup.appendChild(label);
                                }
                            });
                        }
                    });
                }
                
                // 单选框更新按钮
                if (type === 'radio') {
                    document.getElementById('update-radio-btn').addEventListener('click', function() {
                        const componentData = getComponentData(id);
                        const options = document.querySelector(`.property-input[data-prop="options"]`).value.split('\n');
                        const selected = document.querySelector(`.property-input[data-prop="selected"]`).value;
                        
                        componentData.props.options = options.filter(opt => opt.trim() !== '');
                        componentData.props.selected = selected;
                        saveComponentData(id, componentData);
                        
                        // 更新单选框
                        const radioGroup = document.querySelector(`#${id}`);
                        if (radioGroup) {
                            radioGroup.innerHTML = '';
                            options.forEach((opt, index) => {
                                if (opt.trim() !== '') {
                                    const value = index + 1;
                                    const label = document.createElement('label');
                                    const radio = document.createElement('input');
                                    radio.type = 'radio';
                                    radio.name = `${id}-radio`;
                                    radio.value = value;
                                    radio.checked = value.toString() === selected;
                                    label.appendChild(radio);
                                    label.appendChild(document.createTextNode(` ${opt}`));
                                    radioGroup.appendChild(label);
                                }
                            });
                        }
                    });
                }
                
                // 表格更新按钮
                if (type === 'table') {
                    document.getElementById('update-table-btn').addEventListener('click', function() {
                        const componentData = getComponentData(id);
                        const rows = parseInt(componentData.props.rows) || 2;
                        const cols = parseInt(componentData.props.cols) || 3;
                        
                        // 生成表头
                        let thead = '<thead><tr>';
                        for (let i = 1; i <= cols; i++) {
                            thead += `<th>标题${i}</th>`;
                        }
                        thead += '</tr></thead>';
                        
                        // 生成表体
                        let tbody = '<tbody>';
                        for (let r = 1; r <= rows; r++) {
                            tbody += '<tr>';
                            for (let c = 1; c <= cols; c++) {
                                tbody += `<td>内容${(r-1)*cols + c}</td>`;
                            }
                            tbody += '</tr>';
                        }
                        tbody += '</tbody>';
                        
                        // 更新表格HTML
                        const table = element.querySelector('table');
                        table.innerHTML = thead + tbody;
                    });
                }
            }
            
            // 更新组件
            function updateComponent(id) {
                const wrapper = document.querySelector(`.draggable-component[data-id="${id}"]`);
                if (!wrapper) return;
                
                const componentData = getComponentData(id);
                const type = componentData.type;
                const props = componentData.props;
                
                switch(type) {
                    case 'button':
                        const button = wrapper.querySelector('button');
                        button.textContent = props.text || '';
                        button.className = props.class || '';
                        button.style.cssText = props.style || '';
                        break;
                    case 'label':
                        const label = wrapper.querySelector('label');
                        label.textContent = props.text || '';
                        label.setAttribute('for', props.for || '');
                        label.className = props.class || '';
                        label.style.cssText = props.style || '';
                        break;
                    case 'textbox':
                        const textbox = wrapper.querySelector('input[type="text"]');
                        textbox.placeholder = props.placeholder || '';
                        textbox.value = props.value || '';
                        textbox.className = props.class || '';
                        textbox.style.cssText = props.style || '';
                        break;
                    case 'textarea':
                        const textarea = wrapper.querySelector('textarea');
                        textarea.placeholder = props.placeholder || '';
                        textarea.value = props.value || '';
                        textarea.rows = props.rows || 3;
                        textarea.className = props.class || '';
                        textarea.style.cssText = props.style || '';
                        break;
                    case 'div':
                        const div = wrapper.querySelector('div:not(.resize-handle)');
                        div.textContent = props.text || '';
                        div.className = props.class || '';
                        div.style.cssText = props.style || '';
                        break;
                    case 'border':
                        const border = wrapper.querySelector('.border-component');
                        border.textContent = props.text || '';
                        border.className = props.class || '';
                        border.style.cssText = props.style || '';
                        break;
                    case 'table':
                        const table = wrapper.querySelector('table');
                        table.className = props.class || '';
                        table.style.cssText = props.style || '';
                        break;
                }
            }
            
            // 删除组件
            function deleteComponent(id) {
                const wrapper = document.querySelector(`.draggable-component[data-id="${id}"]`);
                if (wrapper) {
                    if (selectedComponent === wrapper) {
                        selectedComponent = null;
                        document.getElementById('properties-content').innerHTML = '<p>请选择一个组件来编辑属性</p>';
                    }
                    wrapper.remove();
                    delete componentsData[id];
                }
            }
            
            // 导出HTML
            document.getElementById('export-btn').addEventListener('click', function() {
                let html = `<!DOCTYPE html>
<html>
<head>
    <title>设计导出</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            position: relative;
        }
        
        .checkbox-group, .radio-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .border-component {
            padding: 15px;
        }
    </style>
</head>
<body>
`;
                
                // 收集所有组件
                const components = document.querySelectorAll('.draggable-component');
                components.forEach(component => {
                    const id = component.dataset.id;
                    const componentData = getComponentData(id);
                    
                    // 添加组件的位置样式
                    let style = `position: absolute; top: ${componentData.position.top}px; left: ${componentData.position.left}px;`;
                    
                    // 添加容器的大小样式
                    if (componentData.type === 'div' || componentData.type === 'border') {
                        style += `width: ${componentData.size.width}px; height: ${componentData.size.height}px;`;
                    }
                    
                    if (componentData.props.style) {
                        style += componentData.props.style;
                    }
                    
                    // 根据类型生成HTML
                    let componentHtml = '';
                    switch(componentData.type) {
                        case 'button':
                            componentHtml = `<button id="${id}" class="${componentData.props.class || ''}" style="${style}">${componentData.props.text || ''}</button>`;
                            break;
                        case 'label':
                            componentHtml = `<label id="${id}" for="${componentData.props.for || ''}" class="${componentData.props.class || ''}" style="${style}">${componentData.props.text || ''}</label>`;
                            break;
                        case 'textbox':
                            componentHtml = `<input type="text" id="${id}" placeholder="${componentData.props.placeholder || ''}" value="${componentData.props.value || ''}" class="${componentData.props.class || ''}" style="${style}">`;
                            break;
                        case 'textarea':
                            componentHtml = `<textarea id="${id}" placeholder="${componentData.props.placeholder || ''}" rows="${componentData.props.rows || 3}" class="${componentData.props.class || ''}" style="${style}">${componentData.props.value || ''}</textarea>`;
                            break;
                        case 'select':
                            const selectOptions = componentData.props.options || [];
                            let selectHtml = `<select id="${id}" class="${componentData.props.class || ''}" style="${style}">`;
                            selectOptions.forEach((opt, index) => {
                                const value = index + 1;
                                selectHtml += `<option value="${value}" ${value.toString() === componentData.props.selected ? 'selected' : ''}>${opt}</option>`;
                            });
                            selectHtml += '</select>';
                            componentHtml = selectHtml;
                            break;
                        case 'checkbox':
                            const checkboxOptions = componentData.props.options || [];
                            let checkboxHtml = `<div class="checkbox-group" id="${id}" class="${componentData.props.class || ''}" style="${style}">`;
                            checkboxOptions.forEach((opt, index) => {
                                const value = index + 1;
                                const checked = componentData.props.checked.includes(value.toString()) ? 'checked' : '';
                                checkboxHtml += `<label><input type="checkbox" name="${id}-checkbox" value="${value}" ${checked}> ${opt}</label>`;
                            });
                            checkboxHtml += '</div>';
                            componentHtml = checkboxHtml;
                            break;
                        case 'radio':
                            const radioOptions = componentData.props.options || [];
                            let radioHtml = `<div class="radio-group" id="${id}" class="${componentData.props.class || ''}" style="${style}">`;
                            radioOptions.forEach((opt, index) => {
                                const value = index + 1;
                                const checked = value.toString() === componentData.props.selected ? 'checked' : '';
                                radioHtml += `<label><input type="radio" name="${id}-radio" value="${value}" ${checked}> ${opt}</label>`;
                            });
                            radioHtml += '</div>';
                            componentHtml = radioHtml;
                            break;
                        case 'table':
                            const table = component.querySelector('table');
                            componentHtml = `<div style="${style}">${table.outerHTML}</div>`;
                            break;
                        case 'div':
                            componentHtml = `<div id="${id}" class="${componentData.props.class || ''}" style="${style}">${componentData.props.text || ''}</div>`;
                            break;
                        case 'border':
                            componentHtml = `
                                <div id="${id}" class="border-component ${componentData.props.class || ''}" 
                                    style="${style} border-width: ${componentData.props.borderWidth || '2px'};
                                    border-style: ${componentData.props.borderStyle || 'solid'};
                                    border-color: ${componentData.props.borderColor || '#000'};">
                                    ${componentData.props.text || ''}
                                </div>
                            `;
                            break;
                    }
                    
                    html += componentHtml + '\n';
                });
                
                html += `
</body>
</html>`;
                
                // 显示导出模态框
                document.getElementById('export-code').value = html;
                document.getElementById('export-modal').style.display = 'flex';
            });
            
            // 复制代码
            document.getElementById('copy-btn').addEventListener('click', function() {
                const codeTextarea = document.getElementById('export-code');
                codeTextarea.select();
                document.execCommand('copy');
                alert('代码已复制到剪贴板！');
            });
            
            // 关闭模态框
            document.getElementById('close-modal').addEventListener('click', function() {
                document.getElementById('export-modal').style.display = 'none';
            });
            
            // 清空设计区
            document.getElementById('clear-btn').addEventListener('click', function() {
                if (confirm('确定要清空设计区吗？')) {
                    designContainer.innerHTML = '';
                    selectedComponent = null;
                    document.getElementById('properties-content').innerHTML = '<p>请选择一个组件来编辑属性</p>';
                    
                    // 清空组件数据
                    for (const id in componentsData) {
                        delete componentsData[id];
                    }
                }
            });
        });
    </script>
</body>
</html>